<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        left-arrow
        @click-left="$router.go(-1)"
      >
      <!-- 头部选项卡 -->
      <template #title>
        <van-tabs v-model="activeName" background="transparent"
        line-width="35"
        line-height="3"
        color="#fff"
        title-active-color="#FFFFFF"
        title-inactive-color="#FEFEFE">
        <van-tab title="身高" name="身高" to="" replace  title-style="font-size:.19rem;font-weight:bold"/>
        <van-tab title="体重" name="体重" to=""  title-style="font-size:.19rem;font-weight:bold"/>
      </van-tabs>
      </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="tab">
        <van-tabs type="card" color="#FCCE00">
        <van-tab title="曲线" title-style="fontSize:.12rem">
          <!-- 引入v-charts -->
          <ve-line :data="chartData"></ve-line>
        </van-tab>
        <van-tab title="记录" title-style="fontSize:.12rem">内容 2</van-tab>
      </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Tab, Tabs } from 'vant'
import VeLine from 'v-charts/lib/line.common'
Vue.use(VeLine)
Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)

export default {
  data () {
    return {
      activeName: '身高',
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  .header {
    @include rect(100%,.44rem);
    .van-nav-bar {// navbar样式
      background-color: #FCCE00;
      @include rect(100%,.44rem);
      /deep/.van-nav-bar__left {// 左按钮
        .van-icon {
          color: white;
          font-size: .17rem;
        }
      }
    }
    // 头部选项卡样式
    /deep/.van-tabs__nav--line {
      height: 90%;
    }
    /deep/.van-tab--active {
      font-weight: bold;
    }
  }
  .content {
    .tab {
      height: 100%;
      padding-top: .25rem;
      /deep/.van-tabs__nav--card {
        border-radius: 20px;
        margin: 0 auto;
        width: 1.23rem;
        height: .2rem;
        align-items: center;
        overflow: hidden;
      }
      /deep/.van-tabs__content {
        height: 5.58rem;
      }
    }
  }
}
</style>
